<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="queryForms">
			<el-form-item label="用户名称" prop="userName">
				<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter.native="handleQuery" maxlength="20" show-word-limit  />
			</el-form-item>
			<el-form-item label="手机号码" prop="phonenumber">
				<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" maxlength="11"  />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="openSelectUser" v-hasPermi="['system:role:add']">添加用户</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-circle-close" size="mini" :disabled="multiple" @click="cancelAuthUserAll" v-hasPermi="['system:role:remove']">批量取消授权</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
			</el-col>
			<right-toolbar menuNames="roleUser67" @changeTableData="changeTableData" :showSearch.sync="showSearch" @queryTable="getList" :columns.sync="columns"></right-toolbar>
		</el-row>

		<div class="informationTab">
			<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" border height="100%" ref="table">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" v-if="columns[0].visible" />
				<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" v-if="columns[1].visible" />
				<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" v-if="columns[2].visible" />
				<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" v-if="columns[3].visible" />
				<el-table-column label="状态" align="center" prop="status" v-if="columns[4].visible">
					<template slot-scope="scope">
						<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[5].visible">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-circle-close" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<pagination menuNames="Pagination70" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
	</div>
</template>

<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
import selectUser from "./selectUser"
import { getcolumn } from "@/api/selectList"
export default {
	name: "AuthUser",
	dicts: ["sys_normal_disable"],
	components: { selectUser },
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中用户组
			userIds: [],
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 用户表格数据
			userList: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				roleId: undefined,
				userName: undefined,
				phonenumber: undefined
			},
			// 列信息
			columns: [
				{ key: 0, label: `用户名称`, visible: true },
				{ key: 1, label: `用户昵称`, visible: true },
				{ key: 2, label: `邮箱`, visible: true },
				{ key: 3, label: `手机`, visible: true },
				{ key: 4, label: `状态`, visible: true },
				{ key: 5, label: `创建时间`, visible: true }
			]
		}
	},
	created() {
		const roleId = this.$route.params && this.$route.params.roleId
		if (roleId) {
			this.queryParams.roleId = roleId
			this.getSize()
		}
	},
	methods: {
    getSize() {
			getcolumn({ pageName: "Pagination70" }).then(response => {
				this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
				this.getList()
			})
		},
		changeTableData() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},

		/** 查询授权用户列表 */
		getList() {
			this.loading = true
			allocatedUserList(this.queryParams).then(response => {
				this.userList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 返回按钮
		handleClose() {
			const obj = { path: "/system/role" }
			this.$tab.closeOpenPage(obj)
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm")
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.userIds = selection.map(item => item.userId)
			this.multiple = !selection.length
		},
		/** 打开授权用户表弹窗 */
		openSelectUser() {
			this.$refs.select.show()
		},
		/** 取消授权按钮操作 */
		cancelAuthUser(row) {
			const roleId = this.queryParams.roleId
			this.$modal
				.confirm('确认要取消该用户"' + row.userName + '"角色吗？')
				.then(function () {
					return authUserCancel({ userId: row.userId, roleId: roleId })
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess("取消授权成功")
				})
				.catch(() => {})
		},
		/** 批量取消授权按钮操作 */
		cancelAuthUserAll(row) {
			const roleId = this.queryParams.roleId
			const userIds = this.userIds.join(",")
			this.$modal
				.confirm("是否取消选中用户授权数据项？")
				.then(function () {
					return authUserCancelAll({ roleId: roleId, userIds: userIds })
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess("取消授权成功")
				})
				.catch(() => {})
		}
	}
}
</script>
